<template>
  <gg-form-item :tip="tip" :must="must" :label="label" :message="message" :messageDisplay="messageDisplay" :labelWidth="localLabelWidth"
    :layout="localLayout" :isIcon="true" :iconTop="iconTop">
    <view class="gg-picker">
      <picker class="gg-picker-item" @change="bindPickerChange" @cancel="bindPickerCancel" :range="localArr" :value="localIndex" range-key="text"
        @click="changeIconTop">
        <view class="gg-picker-item-text" v-if=" localIndex != null">{{localArr[localIndex].text}}</view>
        <view class="gg-picker-item-placeholder" v-else>{{placeholder}}</view>
      </picker>
    </view>
  </gg-form-item>
</template>

<script>
import MixinsPicker from '../mixins/mixins-picker.js';
export default {
  mixins: [MixinsPicker],
  name: "GgPicker1",
  props: {
    //默认输入框内容
    value: {
      type: [Number, String],
      default: ""
    },
    dataType: {
      type: String,
      default: 'value'
    },
    //选项数组
    dataLists: {
      type: [Array, String],
      default: []
    },
    //选项数组的网络请求地址，用于获取dataLists但优先级高于dataLists
    dataUrl: {
      type: String,
      default: ''
    },
    //数据类型value的名称
    dataValue: {
      type: String,
      default: 'value'
    },
    //数据类型text的名称
    dataText: {
      type: String,
      default: 'text'
    }
  },
  data() {
    return {
      localVal: '',
      // 当前数组
      localArr: [],
      // 当前选中下标
      localIndex: null,
      iconTop: false,
      pickerLists: []
    };
  },
  watch: {
    dataLists: {
      handler(newValue) {
        this.localArr = this.itemsSortOut();
        this._dealValue();
      },
      deep: true
    },
    value(newVal) {
      this.localVal = newVal;
      this._dealValue();
    },
  },
  created: function () {
    this.localVal = this.value;
    this.localArr = this.itemsSortOut();
    this._dealValue();
  },
  methods: {
    /**
     * 处理-循环数组数据
     */
    _dealDataList(dataLists) {
      dataLists = dataLists || this.dataLists;
      let newArr = [];
      //判断 dataLists 是否有length属性，有则是数组，没有则不是
      if (dataLists.length) {
        // 判断是否一维数组
        if (typeof (dataLists[0]) != "object") {
          for (let i in dataLists) {
            newArr.push({
              text: dataLists[i],
              value: i.toString(),
            });
          }
        } else {
          newArr = dataLists;
        }

      }
      return newArr;
    },
    /**
     * 处理-选中
     */
    _dealValue() {
      this.dataType = this.dataType != 'text' ? 'value' : 'text';
      //默认Value
      let tempArr = this.localArr;
      let localIndex = null;
      for (let index = 0; index < tempArr.length; index++) {
        if (this.dataType == 'text' && this.localVal == tempArr[index].text) {
          localIndex = index
        } else if (this.dataType == 'value' && this.localVal == tempArr[index].value) {
          localIndex = index
        }
      }
      this.localIndex = localIndex;
    },
    itemsSortOut: function () {
      let original = [];
      if (this.dataUrl) {
        //网络请求
        if (typeof this.dataUrl == 'function') {
          this.dataUrl({}).then((successRes) => {
            original = successRes.data;
          });
        } else {
          console.warn('此处需要自定义请求方法');
        }
      } else {
        original = this.dataLists;
      }
      if (typeof original == 'string') {
        original = JSON.parse(original);
      }
      original = this._dealDataList(original);
      //整理数据
      let tempArr = [];
      let dataValue = this.dataValue ? this.dataValue : 'value';
      let dataText = this.dataText ? this.dataText : 'text';
      let i = 0;
      for (i in original) {
        let data = original[i];
        if (typeof data[dataValue] == 'number') {
          data[dataValue] = data[dataValue].toString();
        }
        tempArr.push({
          value: data[dataValue],
          text: data[dataText]
        })
      }
      return tempArr;
    },
    bindPickerChange: function (e) {
      let localIndex = e.detail.value;

      this.localIndex = localIndex;
      const rowData = this.localArr[localIndex];
      if (this.dataType == 'text') {
        this.localVal = rowData.text;
      } else {
        this.localVal = rowData.value;
      }
      this.$emit('input', this.localVal);
      this.iconTop = false
    }
  }
};
</script>

<style>
.gg-picker {
  min-height: 35px;
}
.gg-picker-item {
  height: 35px;
  line-height: 35px;
  float: left;
  margin-right: 10px;
  width: 100%;
}
.gg-picker-item-placeholder {
  color: grey;
}
</style>